<html>
	<head>
		<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/gamehub.js"></script>
		<link href="style.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript">
			$(document).ready(function(){
				createWebSocketConnection();
				linkGames();
			});
		</script>
	</head>
	<body>
		<div id="top_menu">
			<div id="top_menu_left">
				<img src="images/mini_logo.png" alt="Playground" class="top_menu_logo" />
			</div>
			<div id="top_menu_right">
				<div id="facebook_picture" class="top_menu_userpicture"></div>
				<span id="facebook_username" class="top_menu_username"></span>
				<div class="top_menu_separator"></div>
				
				<div class="top_menu_option">
					<span>online</span>
					<div id="top_menu_status_selector">
						<img src="images/online.png" alt="online" />
					</div>
				</div>
				<div class="top_menu_separator"></div>
				
				<div class="top_menu_option">
					<span>settings</span>
					<img src="images/config.png" alt="settings" />
				</div>
				<div class="top_menu_separator"></div>
				
				<div class="top_menu_option">
					<span>exit</span>
					<img src="images/exit.png" alt="exit" />
				</div>
				<div class="top_menu_separator"></div>
				
				<div id="top_menu_searchbar">
					<!--<input type="text" />-->
				</div>
				</table>
			</div>
		</div>
		
		<div id="gamehub_content">
			<div id="info_bar"></div>
			<div id="games">
				<h2>Select a game in the list below to begin:</h2>
				<img src="images/game_ads/monopoly.png" alt="New game! Monopoly!" class="super_ad" />
				<div id="gameLink:6" class="selectable_game sg_left">
					<img src="images/game_thumbnails/checkers.png" alt="Checkers" class="game_thumbnail" />
					<div class="game_description">
						<h3>Checkers</h3>
						<p>Played matches: 40</p>
						<p>Position in ranking: 158</p>
						<div class="game_stars">
							<img src="images/star.png" alt="Star 1" />
							<img src="images/star.png" alt="Star 2" />
							<img src="images/star.png" alt="Star 3" />
						</div>
					</div>
				</div>
				
				<div id="gameLink:7" class="selectable_game sg_middle">
					<img src="images/game_thumbnails/tictactoe.png" alt="Monopoly" class="game_thumbnail" />
					<div class="game_description">
						<h3>Tic-Tac-Toe</h3>
						<p>Played matches: 10</p>
						<p>Position in ranking: 5</p>
						<div class="game_stars">
							<img src="images/star.png" alt="Star 1" />
							<img src="images/star.png" alt="Star 2" />
							<img src="images/star.png" alt="Star 3" />
							<img src="images/star.png" alt="Star 4" />
							<img src="images/star.png" alt="Star 5" />
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="bottom_illustration"></div>
	</body>
</html>